<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="utf-8" />
<title>木秀于林</title>
<meta name="keywords" content="个人博客模板,博客模板,响应式" />
<meta name="description" content="如影随形主题的个人博客模板，神秘、俏皮。" />
<link href="css/base.css" th:href="@{/h5css/base.css}" rel="stylesheet" />
<link href="css/style.css" th:href="@{/h5css/style.css}"
	rel="stylesheet" />
<link href="css/media.css" th:href="@{/h5css/media.css}"
	rel="stylesheet" />
<meta name="viewport"
	content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->
</head>
<body>
	<div class="ibody">
		<header>
			<h1>木秀猿林</h1>
			<h2>影子是一个会撒谎的精灵，它在虚空中流浪和等待被发现之间;在存在与不存在之间....</h2>
			<div class="logo">
				<a href="/"></a>
			</div>
			<nav id="topnav">
				<a href="/">首页</a> <a href="/allworks">作品展示</a> <a href="/career">职业生涯</a>
				<a href="/articlelist">所有文章</a> <a href="/about">关于我</a>
			</nav>
		</header>
		<article>
			<h2 class="about_h">
				您现在的位置是：<a href="/">首页</a>><a href="###">文章详情</a>
			</h2>
			<div class="index_about">
				<h2 class="c_titile"></h2>
				<p class="box_c">
					<span class="d_time"></span><span>编辑：<span
						id="author"></span></span><span>浏览（<span id="readnum"></span>）</span><span>评论览（14）</span>
				</p>
				<ul class="infos">
					
				</ul>
				<div class="keybq">
					<p>
						<span>关键字词</span>：黑色,个人博客,时间轴,响应式
					</p>
				</div>
				<div class="nextinfo">
					<p>
						上一篇：<a href="###" class="forwardarticle"></a>
					</p>
					<p>
						下一篇：<a href="###" class="nextarticle"></a>
					</p>
				</div>
				<div class="otherlink">
					<h2>相关文章</h2>
					<ul>
						<li><a href="/news/s/2013-07-25/524.html" title="现在，我相信爱情！">现在，我相信爱情！</a></li>
						<li><a href="/newstalk/mood/2013-07-24/518.html"
							title="我希望我的爱情是这样的">我希望我的爱情是这样的</a></li>
						<li><a href="/newstalk/mood/2013-07-02/335.html"
							title="有种情谊，不是爱情，也算不得友情">有种情谊，不是爱情，也算不得友情</a></li>
						<li><a href="/newstalk/mood/2013-07-01/329.html"
							title="世上最美好的爱情">世上最美好的爱情</a></li>
						<li><a href="/news/read/2013-06-11/213.html"
							title="爱情没有永远，地老天荒也走不完">爱情没有永远，地老天荒也走不完</a></li>
						<li><a href="/news/s/2013-06-06/24.html" title="爱情的背叛者">爱情的背叛者</a></li>
					</ul>
				</div>
			</div>
		</article>
		<aside>
			<div class="rnav">
			</div>
			<div class="ph_news">
				<h2>
					<p>点击排行</p>
				</h2>
				<ul class="ph_n">
				</ul>
				<h2>
					<p>栏目推荐</p>
				</h2>
				<ul>
					<li><a href="/">有一种思念，是淡淡的幸福,一个心情一行文字</a></li>
					<li><a href="/">励志人生-要做一个潇洒的女人</a></li>
					<li><a href="/">女孩都有浪漫的小情怀——浪漫的求婚词</a></li>
					<li><a href="/">Green绿色小清新的夏天-个人博客模板</a></li>
					<li><a href="/">女生清新个人博客网站模板</a></li>
					<li><a href="/">Wedding-婚礼主题、情人节网站模板</a></li>
					<li><a href="/">Column 三栏布局 个人网站模板</a></li>
					<li><a href="/">时间煮雨-个人网站模板</a></li>
					<li><a href="/">花气袭人是酒香—个人网站模板</a></li>
				</ul>
				<!--<h2>
					<p>最新评论</p>
				</h2>
				<ul class="pl_n">
					<dl>
						<dt>
							<img src="images/s8.jpg" th:src="@{/h5images/s8.jpg}" />
						</dt>
						<dt></dt>
						<dd>
							DanceSmile
							<time>49分钟前</time>
						</dd>
						<dd>
							<a href="/">文章非常详细，我很喜欢.前端的工程师很少，我记得几年前yahoo花高薪招聘前端也招不到</a>
						</dd>
					</dl>
					<dl>
						<dt>
							<img src="images/s7.jpg" th:src="@{/h5images/s7.jpg}" />
						</dt>
						<dt></dt>
						<dd>
							yisa
							<time>2小时前</time>
						</dd>
						<dd>
							<a href="/">我手机里面也有这样一个号码存在</a>
						</dd>
					</dl>
					<dl>
						<dt>
							<img src="images/s6.jpg" th:src="@{/h5images/s6.jpg}" />
						</dt>
						<dt></dt>
						<dd>
							小林博客
							<time>8月7日</time>
						</dd>
						<dd>
							<a href="/">博客色彩丰富，很是好看</a>
						</dd>
					</dl>
					<dl>
						<dt>
							<img src="images/003.jpg" th:src="@{/h5images/003.jpg}" />
						</dt>
						<dt></dt>
						<dd>
							DanceSmile
							<time>49分钟前</time>
						</dd>
						<dd>
							<a href="/">文章非常详细，我很喜欢.前端的工程师很少，我记得几年前yahoo花高薪招聘前端也招不到</a>
						</dd>
					</dl>
					<dl>
						<dt>
							<img src="images/002.jpg" th:src="@{/h5images/002.jpg}" />
						</dt>
						<dt></dt>
						<dd>
							yisa
							<time>2小时前</time>
						</dd>
						<dd>
							<a href="/">我手机里面也有这样一个号码存在</a>
						</dd>
					</dl>
				</ul>
				 <h2>
					<p>最近访客</p>
					<ul>
						<img src="images/vis.jpg" th:src="@{/h5images/vis.jpg}" />
						
					</ul>
				</h2> -->
			</div>
			<div class="copyright">
				<ul>
					<p>
						Design by <a href="/">DanceSmile</a>
					</p>
					<p>蜀ICP备11002373号-1</p>
				</ul>
			</div>
		</aside>
		<script src="js/silder.js" th:src="@{/h5js/silder.js}"></script>
		<script src="../../static/jquery/2.1.4/jquery-2.1.4.min.js"
			th:src="@{/js/jquery.min.js}"></script>
		<script type="text/javascript" th:inline="javascript">
			/*<![CDATA[*/ 
			    function getclickarticle(){
					$.get("/getclickarticle",function(result){
						if(result != null){
							var html = "";
							$.each(result,function(key,value){
								if(key == 0 || key == 1 || key ==2){
									html += "<li><span class='num"+(key+1)+"'>"+(key+1)+"</span><a href='/newdetail/"+value.id+"'>"+value.articleName+"</a></li>";
								}else{
									html += "<li><span>"+(key+1)+"</span><a href='/newdetail/"+value.id+"'>"+value.articleName+"</a></li>";
								}
								$(".ph_n").html(html);
							});
						}
					});
				}
				$(document).ready(function(){
					var id = [[${id}]];
					$(".c_titile").empty();
					$(".d_time").empty();
					$("#author").empty();
					$(".infos").empty();
					//获取文章详情
					$.get("/getonearticle/"+id,function(result){
						if(result != null){
							$(".c_titile").html(result.articleName);
							$(".d_time").html("发布时间："+result.regTime);
							$("#author").html(result.user.nickName);
							$(".infos").html(result.articleBody.articleBody);
							$("#readnum").html(result.readnum);
						}
					});
					//获取所有文章类型
					$.get("/getarticletype",function(result){
						if(result != null){
							var html = "";
							$.each(result,function(key,item){
								html += "<li class='rnav"+((key%4)+1)+"'><a href='/alltypearticle/"+item.id+"'>"+item.typeName+"</a></li>";							
							});
							$(".rnav").html(html);
						}
					});
					//获取文章的上一篇以及下一篇
					$.get("/getarticlenext/"+id,function(result){
						if(result != null){
							if(result.fArticle != null){
								$(".forwardarticle").attr("href","/newdetail/"+result.fArticle.id);
								$(".forwardarticle").html(result.fArticle.articleName);
							}else{
								$(".forwardarticle").removeAttr("href");
								$(".forwardarticle").html("无上一篇文章");
							}
							if(result.nArticle != null){
								$(".nextarticle").attr("href","/newdetail/"+result.nArticle.id);
								$(".nextarticle").html(result.nArticle.articleName);
							}else{
								$(".nextarticle").removeAttr("href");
								$(".nextarticle").html("无下一篇文章");
							}
						}
					});
					getclickarticle();
				});	  
			/*]]>*/				
			</script>
		<div class="clear"></div>
		<!-- 清除浮动 -->
	</div>
</body>
</html>
